<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>SOCKET.IO DEMO</title>
    <base>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/socket.io/1.7.4/socket.io.min.js"></script>
    <script src="https://cdn.bootcss.com/ckeditor/4.8.0/ckeditor.js"></script>
    <style>
        body {
            padding: 20px;
        }

        #console {
            height: 650px;
            overflow: auto;
        }

        .username-msg {
            color: orange;
        }

        .connect-msg {
            color: green;
        }

        .disconnect-msg {
            color: red;
        }

        .send-msg {
            color: #888
        }
    </style>
</head>

<body>
    <h1>测试聊天程序</h1>
    <!-- <br /> -->
    <div id="console" class="well"></div>
    <form class="well form-inline" onsubmit="return false;">
        <input id="name" class="input-xlarge" type="hidden" placeholder="用户名称. . . " />
        <!-- <input id="msg" class="input-xlarge" type="text" placeholder="发送内容. . . " /> -->
        <textarea id="msg" rows="10" cols="50" placeholder="发送内容. . . "></textarea>
        <button type="button" onClick="sendMessage()" class="btn">发送</button>
        <button type="button" onClick="sendDisconnect()" class="btn">下线</button>
        <button type="button" onClick="reloadThis()" class="btn">重连</button>
    </form>
</body>
<script type="text/javascript">
    var editor = CKEDITOR.replace('msg');
    editor.on("instanceReady", function () {
        this.document.on("keydown", function () {
            //console.log(window.frames[0]);
            var event = window.frames[0].event;
            if (event.ctrlKey && event.keyCode == 13) { // enter 键
                //要做的事情
                sendMessage();
            }
        });
    });
    var socket;
    connect();

    function connect() {
        socket = io.connect('ws://192.10.200.203:9093');
        $("#name").val("访客" + parseInt(Math.random() * 100 + 1, 10));

        socket.on('connect', function () {
            console.log("连接成功");
            serverOutput('<span class="connect-msg">欢迎光临!</span>');
            socket.emit('chatevent', {
                userId: 1,
                userName: $("#name").val(),
                receiveUserId: 2,
                content: "已上线!"
            });
        });

        socket.on('chatevent', function (data) {
            output('<span class="username-msg">' + '<img  src="images/head.jpg" height="64" width="64"/>' +
                data.userName + ' : </span>' +
                data.content);
        });

        socket.on('disconnect', function () {
            serverOutput('<span class="disconnect-msg">' + $("#name").val() + '已下线! </span>');
        });
    }

    function reloadThis() {
        socket.disconnect();
        connect();
        console.log(socket);
    }

    function sendDisconnect() {
        socket.emit('chatevent', {
            userId: 1,
            userName: $("#name").val(),
            receiveUserId: 2,
            content: "已下线!"
        });
        socket.disconnect();
    }

    function sendMessage() {
        var userName = $("#name").val()
        var message = editor.getData();
        $('#msg').val('');
        socket.emit('chatevent', {
            userId: 1,
            userName: userName,
            receiveUserId: 2,
            content: message
        });
        //editor.setData("");
    }

    function output(message) {
        var currentTime = "<span class='time' >" + new Date() + "</span>";
        var element = $("<div>" + " " + message + "</div>");
        $('#console').prepend(element);
    }

    function serverOutput(message) {
        var element = $("<div>" + message + "</div>");
        $('#console').prepend(element);
    }

    document.onkeydown = function (event) {
        //alert(0);
        var e = event || window.event || arguments.callee.caller.arguments[0];

        if (event.ctrlKey && event.keyCode == 13) { // enter 键
            //要做的事情
            sendMessage();
        }
    };
</script>

</html>